<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-30">
			<view class="address u-form-box" @click="onSwitchAddress()">
				<view v-if="userData.user_add.is_have == 1">
					<view>{{ addressData.city }}</view>
					<view class="u-m-t-10 u-m-b-5 u-font-38">{{ addressData.address }}</view>
					<view>
						<span class="u-m-r-5">{{ addressData.name }}</span>
						<span>{{ addressData.phone }}</span>
					</view>
				</view>
				<view v-else>暂无收货信息，点击新建</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="goods u-form-box">
				<view class="u-m-b-10">所有商品</view>
				<view class="goods_item" v-for="goodsItem in goodsData.list" :key="goodsItem.id">
					<image :src="goodsItem.goods.head_image[0]"></image>
					<view class="u-flex-1 u-m-l-20 u-flex-col u-row-between" style="height: 150rpx">
						<view>
							<view class="u-font-30 u-font-bold">{{goodsItem.goods.name}}</view>
							<view class="u-font-24 u-color-lightGray u-m-t-5 u-ellipsis">{{goodsItem.goods.des}}</view>
						</view>
						<view class="u-flex u-row-between">
							<view>
								<span class="u-font-bold u-font-24 u-color-red">¥</span>
								<span class="u-font-bold u-font-32 u-color-red">{{goodsItem.goods.vip_price}}</span>
								<span class="u-m-l-10 u-font-22 u-color-gray u-font-line">¥{{goodsItem.goods.price}}</span>
							</view>
							<view class="num">x{{goodsItem.num || 1}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ship u-form-box">
				<view class="u-m-b-30 u-flex u-row-between">
					<view>商品总额</view>
					<view>¥{{goodsData.orgPrice}}</view>
				</view>
				<view class="u-m-b-30 u-flex u-row-between">
					<view>运费</view>
					<view class="u-color-red">免运费</view>
				</view>
				<view class="u-m-b-30 u-flex u-row-between">
					<view>包装费</view>
					<view class="u-color-red">免包装费</view>
				</view>
				<!-- <view class="u-m-b-20 u-flex u-row-between">
					<view>使用积分（当前{{userData.integral}}点）</view>
					<view>
						<u-number-box v-model="point" :max="userData.integral <= goodsData.orgPrice ? userData.integral : goodsData.orgPrice"  @change="onChangePoint()"></u-number-box>
					</view>
				</view>
				<view class="u-flex u-row-right u-m-b-30 u-p-b-30 u-line-bottom" @click="onUseAllPoint()">
					<view class="u-back-puce u-p-t-10 u-p-b-10 u-color-white view_box">使用全部积分</view>
				</view> -->
				<view class="u-m-b-10 u-flex u-row-between">
					<view>实际支付</view>
					<view>¥{{goodsData.price}}</view>
				</view>
				<view class="u-flex u-row-right" v-if="[5,6,7,8,9].includes(userData.partner_status) || [5,6,7,8,9].includes(userData.president_status)">
					<span>本订单赠送</span>
					<span class="u-color-red">{{ parseInt(Number(goodsData.price) / 2) }}</span>
					<span>积分</span>
				</view>
				<view class="u-flex u-row-between u-m-t-20" @click="remarkData.show = true">
					<view>订单备注</view>
					<view class="u-color-puce">备注 ></view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="shop_bottom">
			<view class="shop_box">
				<view class="price">
					<span>合计：</span>
					<span class="u-color-red u-font-bold u-m-r-5">¥</span>
					<span class="u-font-40 u-color-red u-font-bold">{{goodsData.price}}</span>
				</view>
				<view class="button" @click="onSwitchPay()" v-if="btnStatus">去支付</view>
				<view class="button" v-else>去支付</view>
			</view>
		</view>
		
		<!-- 备注弹出框 -->
		<u-popup v-model="remarkData.show" mode="bottom" border-radius="20">
			<view class="u-p-30">
				<view class="u-m-b-20 u-text-center u-font-34 u-font-bold">备注</view>
				<u-input v-model="remarkData.text" :type="'textarea'" :clearable="false" :custom-style="inputCustomStyle" :border="true" placeholder="选填，备注后商家可见"></u-input>
				<view class="add_btn u-text-center u-m-t-40 u-m-b-20 u-p-20" @click="remarkData.show = false">确定</view>
			</view>
		</u-popup>
		
		<!-- 通用提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" @confirm="modalConfirm"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Modal from '@/components/Modal.vue'
	import { userInfo } from '@/network/api.js'
	import { teaCartList, teaOrderSn, teaCartOrder, teaGoodsInfo, teaCartClear } from '@/network/tea.js'
	export default{
		components:{
			Navbar,
			Modal
		},
		data(){
			return{
				userId: uni.getStorageSync("user_id"),
				goodsData: {
					price: 0, // 实际支付价格
					orgPrice: 0, // 初始价格
					list: []
				},
				userData: {},
				addressData: {},
				point: 0,
				btnStatus: true, // 结算按钮是否可点击
				modal: {
					show: false,
					showCancel: false,
					confirm: '申请',
					cancel: '取消',
					content: ''
				},
				optionData:{},
				remarkData:{
					show: false,
					text: ''
				},
				inputCustomStyle: {
					background: "#f5f6f8",
					borderRadius: "10rpx",
					padding: "20rpx"
				},
				type: 0 // 1 购物车模式  2 单商品模式
			}
		},
		onLoad(options){
			if(options.data){
				let data = JSON.parse(options.data)
				this.optionData = data
				this.type = 2
				this.onGetGoodsInfo(data.id)
			}else{
				this.type = 1
				this.onGetCartList()
			}
		},
		onShow() {
			this.onGetUserInfo()
		},
		methods:{
			async onGetGoodsInfo(id){
				const params = {
					user_id: this.userId,
					goods_id: id
				}
				const res = await teaGoodsInfo(params)
				res.data.info.num = this.optionData.num
				this.goodsData.price = Number(res.data.info.vip_price) * res.data.info.num
				this.goodsData.orgPrice = Number(res.data.info.vip_price) * res.data.info.num
				this.goodsData.list = [{goods:res.data.info,num: this.optionData.num}]
			},
			async onGetUserInfo(){
				const res = await userInfo({user_id: this.userId})
				res.data.integral = Number(res.data.integral)
				if(res.data.user_add.is_have == 1){
					this.addressData = res.data.user_add.add
					this.addressData.city = this.addressData.address.substring(0,this.addressData.address.indexOf("区") + 1)
					this.addressData.address = this.addressData.address.substring(this.addressData.address.indexOf("区") + 1,this.addressData.address.length)
				}
				this.userData = res.data
			},
			async onGetCartList(){
				const res = await teaCartList({user_id: this.userId,position: 2})
				let price = 0
				res.data.map(item=>{
					price += item.num * Number(item.goods.vip_price)
				})
				this.goodsData.price = price
				this.goodsData.orgPrice = price
				this.goodsData.list = res.data
			},
			onChangePoint(val){
				if(val.value == this.goodsData.orgPrice){
					this.goodsData.price = 0
				}else{
					this.goodsData.price = this.goodsData.orgPrice - val.value
				}
			},
			onUseAllPoint(){
				// 积分少于等于支付金额
				if(this.goodsData.price == 0){
					return
				}else{
					if(this.userData.integral <= this.goodsData.orgPrice){
						this.point = this.userData.integral
						this.goodsData.price = this.goodsData.orgPrice - this.userData.integral
					}else{
						this.point = this.goodsData.orgPrice
						this.goodsData.price = this.userData.integral - this.goodsData.orgPrice
					}
				}
			},
			onSwitchAddress(){
				uni.navigateTo({
					url:"/teaBureau/teaAddressList/teaAddressList?isPoint=true"
				})
			},
			async onSwitchPay(){
				// this.btnStatus = false
				if(this.addressData.id){
					const goodsJson = []
					this.goodsData.list.map(item=>{
						const params = {
							sku_id: this.type == 2 ? '' : item.sku_id,
							goods_id: this.type == 2 ? item.goods.id : item.goods_id,
							num: item.num,
							price: Number(item.goods.vip_price),
							invoice_num: item.goods.invoice_num
						}
						goodsJson.push(params)
					})
					const orderRes = await teaOrderSn()
					const orderParams = {
						type: 'goods',
						order_sn: orderRes.data.order_sn,
						user_id: this.userId,
						params: JSON.stringify({
							address_id: this.addressData.id,
							pay_price: this.goodsData.price,
							price: this.goodsData.orgPrice,
							number: this.point,
							is_use: this.point > 0 ? 1 : 0,
							user_remark: this.remarkData.text,
							goods_json: JSON.stringify(goodsJson) 
						})
					}
					const res = await teaCartOrder(orderParams)
					if(res.data.order_str){
						const _this = this
						await uni.requestPayment({
							provider: "wxpay",
							appId: res.data.order_str.appId,
							timeStamp: res.data.order_str.timeStamp,
							nonceStr: res.data.order_str.nonceStr,
							package: res.data.order_str.package,
							signType: res.data.order_str.signType,
							paySign: res.data.order_str.paySign,
							success() {
								_this.modal.content = '订单提交成功',
								_this.modal.confirm = '确定'
								_this.modal.show = true
								if(_this.type == 1){
									teaCartClear({user_id: _this.userId})
								}
							},
							fail(err) {
								uni.navigateTo({
									url: "/teaBureau/teaOrderList/teaOrderList"
								})
							},
							complete() {
								_this.btnStatus = true
								uni.hideLoading()
							}
						})
					}else{
						this.modal.content = '订单创建成功'
						this.modal.confirm = '确定'
						this.modal.show = true
					}
				}else{
					this.btnStatus = true
					uni.showToast({
						title: '请补充收货信息'
					})
				}
			},
			modalConfirm(){
				uni.navigateTo({
					url: "/teaBureau/teaOrderList/teaOrderList"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address{
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}
	
	.goods{
		padding: 30rpx;
		margin-top: 30rpx;
		
		.goods_item{
			display: flex;
			justify-content: space-between;
			padding: 10rpx 0;
			
			.drawerIcon{
				opacity: 0.4;
			}
			
			image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}
	}
	
	.ship{
		padding: 30rpx;
		margin-top: 30rpx;
	}
	
	.shop_bottom{
		position: fixed;
		z-index: 999;
		background: #fff;
		padding: 24rpx 24rpx 48rpx 24rpx;
		width: 100%;
		bottom: 0;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.2);
		
		.shop_box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		
		.button{
			background: #B3723E;
			color: #fff;
			padding: 20rpx 50rpx;
			font-size: 30rpx;
			text-align: center;
			border-radius: 50rpx;
			margin-left: 20rpx;
		}
	}
	
	::v-deep .u-input{
		padding: 0 !important;
		
	}
</style>